<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <link rel="stylesheet" href="/public/h5/huanlian/style.css">
    <title>Title</title>
</head>
<body>
<div id="log"></div>

    <img id="img3" class="img3" style="min-width: 3rem;min-height: 3rem;" >
    <div class="pic" style="background-size: cover !important; pointer-events: none;"></div>
    <div class="ewm" style=" position: absolute;width: 100%;bottom: 0;margin-bottom: 0.8rem; display: none;text-align: center;">
        <img style="width:1rem;" src="http://nowechat.oss-cn-shenzhen.aliyuncs.com/h5/huanlian/1511200670.png">

         <a href="http://zero.gdzszero.com/app/index.php?i=9&c=entry&id=8&do=index&m=game_jggaward&wxref=mp.weixin.qq.com" style="display: inline-block;" ><img style="width:2.2rem;" src="http://nowechat.oss-cn-shenzhen.aliyuncs.com/h5/huanlian/mscj.png"></a>
        <div style="color: #ffff;text-shadow: 0 0 5px #444;font-size: 0.20rem;   margin-left: -36%;">截屏分享到朋友圈</div>

    </div>
    <div class="opera" style="  position: absolute;width: 100%;bottom: 0;margin-bottom: 0.5rem;">
        <div style="text-align: center"><img onclick="openCarema();" style="width: 2.44rem;height: auto" src="http://nowechat.oss-cn-shenzhen.aliyuncs.com/h5/huanlian/sczp.png" /></div>
        <div style="text-align: center;margin-top: 0.1rem"><img style="width: 4.83rem;height: auto" src="http://nowechat.oss-cn-shenzhen.aliyuncs.com/h5/huanlian/zyss.png" /></div>
        <div style="text-align: center;margin-top: 0.1rem">
            <a style="display: inline-block;width: 1.83rem;margin-right: 1.3rem;" href="/app/h5/huanlian/select?wid=4"><img style="width:100%;height: auto" src="http://nowechat.oss-cn-shenzhen.aliyuncs.com/h5/huanlian/hhb.png" /></a>
            <a style="display: inline-block;width: 1.83rem;" onclick="finish()"><img style="width: 100%;height: auto" src="http://nowechat.oss-cn-shenzhen.aliyuncs.com/h5/huanlian/wc.png" /></a>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/public/lib/hammer.min.js"></script>
<!--<script type="text/javascript" src="/public/lib/html2canvas.min.js"></script>-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<!--<script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>-->
<script>
    function finish() {
        var url=$('#img3').attr('src');
        if(url){
            $('.opera').fadeOut();
            $('.ewm').fadeIn();
        }else{
            alert('请先上传图片！')
        }

//        html2canvas($('html'), {
//            onrendered: function(canvas) {
//                var url = canvas.toDataURL();//图片地址
//                console.log(url);
//                document.body.appendChild(canvas);
//            },
//            width: 300,
//            height: 300
//        });
    }
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    var url=GetQueryString('url');
    $('.pic').css('background',"url('"+url+"') center / cover");


    var reqAnimationFrame = (function () {
        return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    var log = document.querySelector("#log");
    var el = document.querySelector("#img3");

    var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
    var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);

    var ticking = false;
    var transform;   //图像效果
    var timer;
    var initAngle = 0;  //旋转角度
    var initScale = 1;  //放大倍数

    var mc = new Hammer.Manager(el);   //用管理器  可以同时触发旋转 拖拽  移动
    //var mc = new Hammer(el);	      //旋转和移动互斥
    /**
     ev.srcEvent.type  touchstart  touchend touchmove
     ev.deltaX  手势移动位移变量
     */
    mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
    mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
    mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
    //结束时做一些处理
    mc.on("hammer.input", function(ev) {
        if(ev.isFinal) {
            console.log(START_X+"  "+transform.translate.x  +"   "+ev.deltaX);
            START_X = transform.translate.x ;
            START_Y = transform.translate.y ;
        }

    });
    mc.on("panstart panmove", onPan);
    mc.on("rotatestart rotatemove rotateend", onRotate);
    mc.on("pinchstart pinchmove", onPinch);
    /**
     第二次进入拖拽时  delta位移重置
     移动时 初始位置startxy不动。delta增加
     */
    function onPan(ev){
        if(!ev.isFinal) {
            el.className = '';
            console.log(START_X   +"  "+  START_Y +" |  "+ev.deltaX   +"  "+  ev.deltaY);
            transform.translate = {
                x: START_X + ev.deltaX,
                y: START_Y + ev.deltaY
            };
            requestElementUpdate();
        }
    }

    function onPinch(ev){
        if(ev.type == 'pinchstart') {
            initScale = transform.scale || 1;
        }
        el.className = '';
        transform.scale = initScale * ev.scale;
        requestElementUpdate();
    }

    //旋转相关
    var  preAngle =0 ;
    var  tempAngleFlag=0;
    var  deltaAngle = 0;
    var  startRotateAngle = 0;

    function onRotate(ev) {

        //点下第二个触控点时触发
        if(ev.type == 'rotatestart') {
            startRotateAngle =  ev.rotation ;
            tempAngleFlag = 0 ;
        }
        if(ev.type == 'rotatemove'){
            if(tempAngleFlag == 0){
                preAngle = startRotateAngle;
                tempAngleFlag ++;
            }else{
                deltaAngle = ev.rotation - preAngle;
                el.className = '';
                transform.rz = 1;  //非0  垂直xy轴
                transform.angle =initAngle + deltaAngle;
                requestElementUpdate();
            }
        }

        //旋转结束  记录当前图片角度
        if(ev.type =='rotateend'){
            initAngle = transform.angle;
        }
    }



    function updateElementTransform() {
        var value = [
            'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
            'scale(' + transform.scale + ', ' + transform.scale + ')',
            'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+  transform.angle + 'deg)'
        ];

        value = value.join(" ");
        el.style.webkitTransform = value;  /*为Chrome/Safari*/
        el.style.mozTransform = value; /*为Firefox*/
        el.style.transform = value; /*IE Opera?*/
        ticking = false;
    }

    function requestElementUpdate() {
        if(!ticking) {
            reqAnimationFrame(updateElementTransform);
            ticking = true;
        }
    }

    function logEvent(str) {
        log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
    }

    /**
     初始化设置
     */
    function resetElement() {

        el.className = 'animate';
        transform = {
            translate: { x: START_X, y: START_Y },
            scale: 1,
            angle: 0,
            rx: 0,
            ry: 0,
            rz: 0
        };
        requestElementUpdate();
    }

    function openCarema() {
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['camera','album'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                wx.uploadImage({
                    localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        $.post('/upload/wechat/image',{mediaId:serverId,path:'h5/huanlian/upload/'+new Date().getFullYear().toString()+(new Date().getMonth()+1).toString()+new Date().getDate().toString()+'/h5/huanlian/'+new Date().getTime()+'.jpg'},function (imgdata) {
                            $('#img3').attr('src',imgdata.url);
                        },'JSON');
                    }
                });

            }
        });
    };


    resetElement();

    (function () {
        var designWidth = 640, rem2px = 100;
        document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * rem2px) + 'px';

        var meta = document.getElementsByTagName('meta');
        var share_desc = '';
        for(i in meta){
            if(typeof meta[i].name!="undefined"&&meta[i].name.toLowerCase()=="description"){
                share_desc = meta[i].content;
            }
        }
        var apilist='<%= jssdk.jsApiList %>';
        apilist=apilist.split(',');
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<%= jssdk.appId %>',
            timestamp: '<%= jssdk.timestamp %>',
            nonceStr: '<%= jssdk.nonceStr %>',
            signature: '<%= jssdk.signature %>',
            jsApiList: apilist
        });
        wx.ready(function(){
            // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
            wx.onMenuShareTimeline({
                title: document.title, // 分享标题
                link:window.location.href,
                imgUrl:'http://nowechat.oss-cn-shenzhen.aliyuncs.com/wechat/shopred/img/hongbaoicon.jpg' // 分享图标
            });
            // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
            wx.onMenuShareAppMessage({
                title: document.title, // 分享标题
                desc: share_desc, // 分享描述
                link:window.location.href,
                imgUrl: "http://nowechat.oss-cn-shenzhen.aliyuncs.com/wechat/shopred/img/hongbaoicon.jpg", // 分享图标
                type: 'link' // 分享类型,music、video或link，不填默认为link
            });

        });
    }());

</script>
</html>